<%= javascript_include_tag '/assets/js/jquery.min', 'jquery-ujs', 'application' %>
<%= javascript_include_tag '/assets/bootstrap/js/bootstrap.min' %>
<script src="/assets/js/jquery.dateFormate.min.js" charset="utf-8"></script>

<div class="row" style="font-size:18px;">
  <div class="col-xs-2 col-md-2">当前<strong>客户组:</strong></div>
  <div class="col-xs-3 col-md-2">
    <select id="groupSelector" class="form-control">
      <% CustGroup.all.each do |group| %>
        <option value="<%=group.id %>"><%= group.name %></option>
      <% end %>
    </select>
  </div>
  <div class="col-xs-2 col-md-2">的所有客户</div>
  <div class="col-xs-5 col-md-4">
      <button  class="btn btn-info">对此组别所有的客户发送短信</button>
  </div>
</div>
<div>

<hr>

</div>

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<div id="toolbar">
        <button id="remove" class="btn btn-danger">
            <i class="glyphicon glyphicon-remove"></i> 删除选中
        </button>
        <button data-toggle="modal" data-target="#newCustModal" id="newCustBtn" class="btn btn-primary">
            <i class="glyphicon glyphicon-more"></i> 新建客户
        </button>
        <button id="sendCust" class="btn btn-info">
            <i class="glyphicon glyphicon-add"></i> 对选中的发送短信
        </button>
        <button id="uploadCSVModalBtn" class="btn btn-primary">
            <i class="glyphicon glyphicon-add"></i> 导入EXClE
        </button>
        <span>用户组:<strong id="groupNameShow"></strong>的所有用户</span>
    </div>

    <table id="table"
                   data-toggle="table"
                   data-toolbar="#toolbar"
                   data-height="428"
                   data-url="/phone_number/data"
                   data-sort-order="desc"
                   data-pagination="true"
                    data-side-pagination="server"
                    data-page-size="10"
                    data-page-list="[5, 10, 25, 30, 50, 100]"
                   >
                <thead>
                <tr>
                    <th data-field="state" data-checkbox="true"></th>
                    <th data-field="_id.$oid">编号</th>
                    <th data-field="name">用户姓名</th>
                    <th data-field="number">手机号</th>
                    <th data-field="other">介绍</th>
                    <th data-field="created_at" data-formatter="localtimeFormatter">日期</th>
                </tr>
                </thead>
            </table>
        </div>
    <script>
    var current_group = $("#groupSelector").val();
      function localtimeFormatter(value, row){
        var longDateFormat  = 'yyyy/MM/dd HH:mm:ss';

        return $.format.date(value, longDateFormat);
      }
        var $table = $('#table'),
            $button = $('#remove');
        $(function () {
            $button.click(function () {
                if (confirm("是否确认?")) {

                  var _ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                    $.get("/phone_number/delete/"+row._id.$oid, function(){
                      console.log("正在服务端删除");
                    $table.bootstrapTable('refresh',{query: {group: current_group}});
                    });
                      return row._id;
                  });
                  $table.bootstrapTable('remove', {
                      field: '_id',
                      values: _ids
                  });
                  $table.bootstrapTable('refresh',{query: {group: current_group}});
                }
                return false;



            });
            $.get("/phone_number/group_name/"+$("#groupSelector").val().toString(),function(result){
              $("#groupNameShow").html(result);
            });

            $("#groupSelector").change(function(){
              current_group = $(this).val();
              $table.bootstrapTable('refresh',{query: {group: $(this).val()}});
              $.get("/phone_number/group_name/"+$(this).val().toString(),function(result){
                $("#groupNameShow").html(result);
              });

            });

            $("#uploadCSVModalBtn").click(function(){


              $('#csvUploadModal').modal({
                  "backdrop": "static",
                  "keyboard": false
              });
              $("#csvUploadModal").on('hidden.bs.modal',function(){
                $table.bootstrapTable('refresh',{query: {group: current_group}});
                $('.loadlock').removeAttr('disabled');
                $('.progress').hide();
                $('#progressFeedBack').hide();
                $("#uploadProgress").css("width", 5+"%");
                $("#progressFeedBack span").html(5+"%");

              });
            });
            $('.progress').hide();
            $('#progressFeedBack').hide();



        });
    </script>
    <script charset="utf-8">//此处写远程执行的函数
      function afterSubmit(){
        $("#newCustModal").modal('hide');
        $("#newCustModal").find("input")[1].value = '';
        $("#newCustModal").find("input")[2].value = '';
        // $("#newCustModal").find("input")[3].value = ''
        $table.bootstrapTable('refresh',{query: {group: current_group}});
        // console.log($("#newCustGroupModal").find("input")[0]);
      }
    </script>

    <div class="modal fade" id="newCustModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">新建客户</h4>
          </div>
          <% form_tag url(:phone_number, :create, :format => :js), :remote => true do %>
          <div class="modal-body">

              <div class="form-group">
                <label for="exampleInputEmail1">姓名</label>
                <input name="name" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名">
              </div>
              <div class="form-group">
                <label for="exampleInputEmail1">电话号码</label>
                <input name="number" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入手机号">
              </div>
              <div class="form-group">
                <label for="exampleInputEmail1">介绍</label>
                <input name="intro" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入介绍">
              </div>
              <div class="form-group">
                <label for="exampleInputEmail1">选择客户组</label>
                <select name="user_group" class="form-control">
                  <% CustGroup.all.each do |group| %>
                    <option value="<%=group.id %>"><%= group.name %></option>
                  <% end %>
                </select>
              </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
          <% end %>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script charset="utf-8">

      //这里是文件上传的导入提交之后远程执行的的函数
      function afterUpload(){

      }
    </script>
    <div class="modal fade" id="csvUploadModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">导入CSV文件</h4>
          </div>

          <div class="modal-body">

                <% form_tag url(:file, :file_import), multipart: true, enctype:"multipart/form-data", target: "fileload", id: "uploadForm" do %>
              <div class="form-group">
                <label for="exampleInputEmail1">选择您要上传的文件</label>
                <input   name="file_to_upload" type="file" class="form-control" id="file_to_upload">
              </div>
              <div class="form-group">
                <label for="exampleInputEmail1">选择需要导入的客户组</label>
                <select name="user_group" class="form-control">
                  <% CustGroup.all.each do |group| %>
                    <option value="<%=group.id %>"><%= group.name %></option>
                  <% end %>
                </select>
              </div>

              <div class="form-group">

                <input name="uploader" class=" loadlock btn btn-primary" value="上传" type="submit" class="form-control" >
              </div>
              <% end %>

              <iframe name="fileload" src="" width="1" height="1"></iframe>
              <div class="progress">
                <div id="uploadProgress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 2%">

                </div>
              </div>
              <div id="progressFeedBack" style="text-align:center">
                已完成<span>10%<span>
              </div>

          </div>
          <div class="modal-footer">
            <input type="button" class="loadlock btn btn-default" data-dismiss="modal" value="关闭"/>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<script charset="utf-8">
    function getUploadProgress()
     {
         $(document).ready(function() {
             $.ajax({
                 type: "GET",
                 url: "file/fileprogress",
                 dataType: "text",
                 success: function(data) {
                   $("#uploadProgress").css("width", data+"%");
                   $("#progressFeedBack span").html(data+"%");
                   console.log('100less');
                   console.log(data);
                   if (data == '100') {
                     console.log('100more');
                     $('.loadlock').removeAttr('disabled');
                     return false;
                   }
                 }
             });
         });
     }

  $("#uploadForm").submit(function(){
    var $file = $("#file_to_upload");
    if ($file.val()=='') {
      alert("请务必选择文件");
      return false;
    }
    var tt = setInterval('getUploadProgress()',3000);//轮询执行，500ms一次

    $("#csvUploadModal").find(".loadlock").each(function(){
      console.log($(this));
      $(this).attr("disabled",'');
    });
    $('.progress').show();
    $('#progressFeedBack').show();


  });



</script>
